<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags-->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="Ora theme tempalte" />
    <meta name="author" content="NDT" />
    <meta name="keywords" content="Ora theme template" />
    <!-- Title Page-->
    <title>主页 - 作品展示</title>
    <!-- Fontfaces CSS-->
    <link href="static/css/font-face.css" rel="stylesheet" media="all" />
    <link href="static/css/font-awesome.min.css" rel="stylesheet" media="all" />
    <link href="static/css/linearicons-free.css" rel="stylesheet" media="all" />
    <link href="static/css/elegant-icons.css" rel="stylesheet" media="all" />
    <!-- Bootstrap CSS-->
    <link href="static/css/bootstrap.min.css" rel="stylesheet" media="all" />
    <!-- Vendor CSS-->
    <link href="static/css/animate.min.css" rel="stylesheet" media="all" />
    <link href="static/css/hamburgers.min.css" rel="stylesheet" media="all" />
    <link href="static/css/slick.css" rel="stylesheet" media="all" />
    <link href="static/css/animsition.min.css" rel="stylesheet" media="all" />
    <!-- Main CSS-->
    <link href="static/css/theme.css" rel="stylesheet" media="all" />
    <!--Favicons-->
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon"/>
    <link rel="apple-touch-icon" href="apple-icon.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png" />
  </head>

  <body class="animsition page-wrapper">
    <!-- header-->
    <header class="header header-primary js-header-bar d-md-block" style="width: 100%; overflow: hidden;background-color: white;z-index: 99999;"> 
      <div class="container-fluid">
        <div class="section-inner header-bar">
          <div class="header-bar-logo">
            <a href="index.html"><img src="static/picture/logo.png" alt="Ygl" style="border-radius: 9999px;" /></a>
          </div>
          <div class="header-bar-menu">
            <nav class="navbar-primary">
              <ul class="navbar-nav">
                <li class="nav-item active"><a style="font-size: 18px" class="nav-link" href="#intro">个人简介</a></li>
                <li class="nav-item"><a style="font-size: 18px" class="nav-link" href="#works">作品集</a></li>
                <li class="nav-item"><a style="font-size: 18px" class="nav-link" href="#skill-tree">技能树</a></li>
                <li class="nav-item"><a style="font-size: 18px; color: #808080" href="https://www.cnblogs.com/yangguanglei" target="_blank">博客园</a></li>
                <li class="nav-item"><a style="font-size: 18px; color: #808080" href="https://github.com/yangguanglei" target="_blank">github</a></li>
                <li class="nav-item"><a style="font-size: 18px; color: #808080" href="https://gitee.com/yangguanglei" target="_blank">gitee</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </header>
    <!-- Intro start-->
    <section class="section-intro js-intro" id="intro" data-intro-layout="fullscreen">
      <div class="container">
        <article class="section-inner">
          <div class="row" style="margin:0px;width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between">
            <div class="col-md-7">
              <h3 class="intro-name">
                <span class="animated" data-intro-animate="fadeInRight" data-intro-delay="500">您好!</span>
              </h3>
              <p class="intro-text">
                <span class="animated" data-intro-delay="1100" data-intro-animate="fadeInDown">
                  我叫阳广磊，现居云南昆明，今年27岁，本科毕业于南京航空航天大学，是一名正在向后端转型的前端开发工程师，成为全栈是我的小目标，愿从这个小目标做起，努力成为更好地自己。
                </span>
              </p>
              <img class="animated intro-sign" src="static/picture/ic-sign.png" alt="John Smith" data-intro-delay="2000" data-intro-animate="zoomIn" />
            </div>
            <div class="animated" data-intro-delay="3000" data-intro-animate="zoomIn">
              <img src="static/images/intro1.jpg" alt="Ygl" style="width: 320px; height: 320px; border-radius: 9999px;" />
            </div>
          </div>
        </article>
      </div>
    </section>
    <!-- Intro end-->
    <!-- section services-->
    <section class="section section-services bg-grey-1 p-t-110 p-b-90" id="works">
      <div class="container">
        <div class="section-inner">
          <h3 class="section-heading m-b-25">作品集</h3>
          <div class="row justify-content-center m-b-45">
            <p class="section-text-introduce col-lg-9">这里展示的是从毕业至今可展示项目集合，一共8个项目，2个产品，展示截图，由于某些原因，并非每一个项目都有对应的截图，请见谅。</p>
          </div>
          <div class="row">
            <div class="col-lg-4 col-md-6">
              <article class="card-primary card-service">
                <a class="card-link-overlay" href="#user-center"></a>
                <figure class="card-figure">
                  <div class="service-icon"><i class="fa fa-tablet"></i></div>
                </figure>
                <header class="card-header">
                  <h3 class="service-title">数字陆港用户中心建设</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-4 col-md-6">
              <article class="card-primary card-service">
                <a class="card-link-overlay" href="#assets"></a>
                <figure class="card-figure">
                  <div class="service-icon"><i class="fa fa-laptop"></i></div>
                </figure>
                <header class="card-header">
                  <h3 class="service-title">资产管理系统</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-4 col-md-6">
              <article class="card-primary card-service">
                <a class="card-link-overlay" href="https://www.gallops.cn/" target="_blank"></a>
                <figure class="card-figure">
                  <div class="service-icon"><i class="fa fa-bar-chart"></i></div>
                </figure>
                <header class="card-header">
                  <h3 class="service-title">腾晋物流官网项目</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-4 col-md-6">
              <article class="card-primary card-service">
                <a class="card-link-overlay" href="#blog"></a>
                <figure class="card-figure">
                  <div class="service-icon"><i class="fa fa-camera"></i></div>
                </figure>
                <header class="card-header">
                  <h3 class="service-title">多式联运小程序项目</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-4 col-md-6">
              <article class="card-primary card-service">
                <a class="card-link-overlay" href="#testimonials"></a>
                <figure class="card-figure">
                  <div class="service-icon"><i class="fa fa-html5"></i></div>
                </figure>
                <header class="card-header">
                  <h3 class="service-title">新疆安全生产监管系统</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-4 col-md-6">
              <article class="card-primary card-service">
                <a class="card-link-overlay" href="#contact"></a>
                <figure class="card-figure">
                  <div class="service-icon"><i class="fa fa-bar-chart"></i></div>
                </figure>
                <header class="card-header">
                  <h3 class="service-title">云南省公路局应急处置项目</h3>
                </header>
              </article>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- end section services-->
    <!-- section resume-->
    <section class="section section-resume bg-white p-t-110 p-b-120" id="user-center">
      <div class="container">
        <div class="section-inner">
          <h3 class="section-heading m-b-50">数字陆港用户中心建设</h3>
          <div class="tab-content au-tab-content" id="resumeTabContent">
            <div class="tab-pane fade show active" id="experience" role="tabpanel" aria-labelledby="experience-tab">
              <div class="row">
                <div class="col-lg-4">
                  <article class="card-secondary card-resume">
                    <figure class="card-figure">
                      <img class="resume-image img-fluid" src="static/picture/resume-ex-01.png" alt="Project Manager" /><a class="bg-overlay" href="#user-center"></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="resume-title"><a href="#user-center">登录页面</a></h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4">
                  <article class="card-secondary card-resume">
                    <figure class="card-figure"><img class="resume-image img-fluid" src="static/picture/resume-ex-02.png" alt="UI/UX Designer" /><a class="bg-overlay" href="#user-center"></a></figure>
                    <header class="card-header">
                      <h3 class="resume-title"><a href="#user-center">子用户管理</a></h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4">
                  <article class="card-secondary card-resume">
                    <figure class="card-figure">
                      <img class="resume-image img-fluid" src="static/picture/resume-ex-03.png" alt="Web Development" /><a class="bg-overlay" href="#user-center"></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="resume-title"><a href="#user-center">企业关联</a></h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4">
                  <article class="card-secondary card-resume">
                    <figure class="card-figure">
                      <img class="resume-image img-fluid" src="static/picture/resume-ex-04.png" alt="Project Manager" /><a class="bg-overlay" href="#user-center"></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="resume-title"><a href="#user-center">用户信息</a></h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4">
                  <article class="card-secondary card-resume">
                    <figure class="card-figure">
                      <img class="resume-image img-fluid" src="static/picture/resume-ex-05.png" alt="Project Manager" /><a class="bg-overlay" href="#user-center"></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="resume-title"><a href="#user-center">注册页面</a></h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4">
                  <article class="card-secondary card-resume">
                    <figure class="card-figure">
                      <img class="resume-image img-fluid" src="static/picture/resume-ex-06.png" alt="Project Manager" /><a class="bg-overlay" href="#user-center"></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="resume-title"><a href="#user-center">公司详情</a></h3>
                    </header>
                  </article>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- end section resume-->
    <!-- section projects-->
    <section class="section section-projects bg-dark-1 p-t-110 p-b-90" id="assets">
      <div class="container-fluid">
        <div class="section-inner">
          <h3 class="section-heading section-heading-light m-b-50">资产管理系统</h3>
          <div class="row">
            <div class="col-lg-3 col-sm-6 wow zoomIn" data-wow-duration="0.5s" data-wow-delay="0.2s">
              <article class="card-primary card-project">
                <a class="card-link-overlay" href="#assets" data-toggle="modal" data-target="#project-post"></a>
                <figure class="card-figure">
                  <img class="project-image img-fluid" src="static/picture/project-01.png" alt="Brand &amp; Strategy Contents" />
                </figure>
                <header class="card-header">
                  <h3 class="project-title">登录 &amp; 资产管理</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-3 col-sm-6 wow zoomIn" data-wow-duration="0.5s" data-wow-delay="0.4s">
              <article class="card-primary card-project">
                <a class="card-link-overlay" href="#assets" data-toggle="modal" data-target="#project-post"></a>
                <figure class="card-figure">
                  <img class="project-image img-fluid" src="static/picture/project-02.png" alt="Brand &amp; Strategy Contents" />
                </figure>
                <header class="card-header">
                  <h3 class="project-title">盘点任务 &amp; 高级筛选</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-3 col-sm-6 wow zoomIn" data-wow-duration="0.5s" data-wow-delay="0.6s">
              <article class="card-primary card-project">
                <a class="card-link-overlay" href="#assets" data-toggle="modal" data-target="#project-post"></a>
                <figure class="card-figure">
                  <img class="project-image img-fluid" src="static/picture/project-03.png" alt="Brand &amp; Strategy Contents" />
                </figure>
                <header class="card-header">
                  <h3 class="project-title">查询列表 &amp; 资产详情</h3>
                </header>
              </article>
            </div>
            <div class="col-lg-3 col-sm-6 wow zoomIn" data-wow-duration="0.5s" data-wow-delay="0.8s">
              <article class="card-primary card-project">
                <a class="card-link-overlay" href="#assets" data-toggle="modal" data-target="#project-post"></a>
                <figure class="card-figure">
                  <img class="project-image img-fluid" src="static/picture/project-04.png" alt="Brand &amp; Strategy Contents" />
                </figure>
                <header class="card-header">
                  <h3 class="project-title">盘点列表 &amp; 盘点详情</h3>
                </header>
              </article>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- end section projects-->
    <!-- section statistic-->
    <div class="section section-statistic bg-grey-1 p-t-150 p-b-120" id="statistic">
      <div class="container">
        <div class="section-inner">
          <ul class="list-reset row justify-content-center">
            <li class="col-md-3">
              <div class="box box-number"><span class="number counterUp">21</span><span class="title">页面总数</span></div>
            </li>
            <li class="col-md-3">
              <div class="box box-number"><span class="number counterUp">32</span><span class="title">接口数</span></div>
            </li>
            <li class="col-md-3">
              <div class="box box-number"><span class="number counterUp">12</span><span class="title">功能</span></div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- end section statistic-->
    <!-- section latest blog-->
    <section class="section section-latest-blog bg-white p-t-110 p-b-100" id="blog">
      <div class="container">
        <div class="section-inner">
          <h3 class="section-heading m-b-50">多式联运小程序项目</h3>
          <ul class="list-reset js-slick row">
            <li class="col">
              <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/blog-01.png" alt="How to Create a Split-Screen Slider With JavaScript" /><a
                        class="bg-overlay"
                        href="#blog"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#blog" data-toggle="modal" data-target="#blog-post">首页</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/blog-02.png" alt="New Short Course: Lightweight Carousels With John" /><a
                        class="bg-overlay"
                        href="#blog"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#blog" data-toggle="modal" data-target="#blog-post">站点维护</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/blog-03.png" alt="10 Remedial Design Pointers for Developers" /><a
                        class="bg-overlay"
                        href="#blog"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#blog" data-toggle="modal" data-target="#blog-post">代签合同</a>
                      </h3>
                    </header>
                  </article>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- end section blog-->
    <!-- section testimonials-->
    <section class="section section-testimonials bg-grey-1 p-t-110 p-b-50" id="testimonials">
      <div class="container">
        <div class="section-inner">
          <h3 class="section-heading m-b-10">新疆安全生产监管系统</h3>
          <ul class="list-reset js-slick row" data-slick-lg="1" data-slick-dots="true" data-slick-dotsClass="slick-dots dots-style-1">
            <li class="col">
              <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjian-0.png" alt="How to Create a Split-Screen Slider With JavaScript" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">首页上</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjian-1.png" alt="New Short Course: Lightweight Carousels With John" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">首页上</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjian-2.png" alt="10 Remedial Design Pointers for Developers" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">投诉举报</a>
                      </h3>
                    </header>
                  </article>
                </div>
              </div>
            </li>
            <li class="col">
              <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjian-3.png" alt="How to Create a Split-Screen Slider With JavaScript" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">安监信用</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjianapp-01.png" alt="New Short Course: Lightweight Carousels With John" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">APP登录首页</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjianapp-02.png" alt="10 Remedial Design Pointers for Developers" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">APP个人注册</a>
                      </h3>
                    </header>
                  </article>
                </div>
              </div>
            </li>
            <li class="col">
              <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjianapp-03.png" alt="How to Create a Split-Screen Slider With JavaScript" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">APP企业信用和生产隐患</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjianapp-04.png" alt="New Short Course: Lightweight Carousels With John" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">培训教育和详情</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/anjianapp-05.png" alt="10 Remedial Design Pointers for Developers" /><a
                        class="bg-overlay"
                        href="#testimonials"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#testimonials" data-toggle="modal" data-target="#blog-post">安全考核与工程质量监督</a>
                      </h3>
                    </header>
                  </article>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- end section testimonials-->
    <!-- section partner-->
    <!-- end section partner-->
    <!-- section contact-->
    <section class="section bg-parallax p-t-110 p-b-80" id="contact">
      <div class="container">
        <div class="section-inner">
          <h3 class="section-heading m-b-45">云南省公路局应急处置项目</h3>
          <ul class="list-reset js-slick row" data-slick-lg="1" data-slick-dots="true" data-slick-dotsClass="slick-dots dots-style-1">
            <li class="col">
              <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/gongluju-01.png" alt="How to Create a Split-Screen Slider With JavaScript" /><a
                        class="bg-overlay"
                        href="#contact"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#contact" data-toggle="modal" data-target="#blog-post">首页</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/gongluju-02.png" alt="New Short Course: Lightweight Carousels With John" /><a
                        class="bg-overlay"
                        href="#contact"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#contact" data-toggle="modal" data-target="#blog-post">站点维护</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/gongluju-03.png" alt="10 Remedial Design Pointers for Developers" /><a
                        class="bg-overlay"
                        href="#contact"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#contact" data-toggle="modal" data-target="#blog-post">代签合同</a>
                      </h3>
                    </header>
                  </article>
                </div>
              </div>
            </li>
            <li class="col">
              <div class="row">
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/gongluju-04.png" alt="How to Create a Split-Screen Slider With JavaScript" /><a
                        class="bg-overlay"
                        href="#contact"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#contact" data-toggle="modal" data-target="#blog-post">首页</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/gongluju-05.png" alt="New Short Course: Lightweight Carousels With John" /><a
                        class="bg-overlay"
                        href="#contact"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#contact" data-toggle="modal" data-target="#blog-post">站点维护</a>
                      </h3>
                    </header>
                  </article>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12">
                  <article class="card-secondary card-blog">
                    <figure class="card-figure">
                      <img class="blog-image img-fluid" src="static/picture/gongluju-06.png" alt="10 Remedial Design Pointers for Developers" /><a
                        class="bg-overlay"
                        href="#contact"
                        data-toggle="modal"
                        data-target="#blog-post"
                      ></a>
                    </figure>
                    <header class="card-header">
                      <h3 class="blog-title">
                        <a href="#contact" data-toggle="modal" data-target="#blog-post">代签合同</a>
                      </h3>
                    </header>
                  </article>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <!-- end section contact-->
    <!-- footer-->
    <footer class="section section-footer p-t-85 p-b-90" id="skill-tree">
      <div class="container">
        <div class="section-inner">
          <h3 class="section-heading m-b-45 text-white">技能树</h3>
          <ul class="h-list footer-social" style="color: white">
            <li class="list-item" data-toggle="tooltip" title="JavaScript" style="width: 100px">JavaScript</li>
            <li class="list-item" data-toggle="tooltip" title="Vue">Vue</li>
            <li class="list-item" data-toggle="tooltip" title="React">React</li>
            <li class="list-item" data-toggle="tooltip" title="Typescript" style="width: 100px">Typescript</li>
            <li class="list-item" data-toggle="tooltip" title="Java">Java</li>
            <li class="list-item" data-toggle="tooltip" title="SpringBoot" style="width: 100px">SpringBoot</li>
            <li class="list-item" data-toggle="tooltip" title="Mysql">Mysql</li>
            <li class="list-item" data-toggle="tooltip" title="Redis">Redis</li>
            <li class="list-item" data-toggle="tooltip" title="JPA">JPA</li>
            <li class="list-item" data-toggle="tooltip" title="MyBatis">MyBatis</li>
          </ul>
          <p class="footer-text-intro"><span>Built with</span><span class="fa fa-heart"></span><span>in YunNan·KunMing</span></p>
          <p class="footer-copy-text">@ 2023 Designed by Yang Guang Lei.</p>
        </div>
      </div>
    </footer>
    <!-- end section project post-->
    <div id="up-to-top"><i class="fa fa-angle-up"></i></div>
    <!-- Jquery JS-->
    <script src="static/js/jquery.min.js"></script>
    <!-- Bootstrap JS-->
    <script src="static/js/popper.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <!-- Vendor JS-->
    <script src="static/js/slick.min.js"></script>
    <script src="static/js/animsition.min.js"></script>
    <script src="static/js/jquery.waypoints.min.js"></script>
    <script src="static/js/jquery.counterup.min.js"></script>
    <script src="static/js/bootstrap-progressbar.min.js"></script>
    <script src="static/js/wow.min.js"></script>
    <script src="static/js/validator.min.js"></script>
    <script src="static/js/config-contact.js"></script>
    <!-- Main JS-->
    <script src="static/js/global.js"></script>
  </body>
</html>
<!-- end document-->
